<template>
    <jb-crud-page
        ref="postPage"
        title-icon="carbon:batch-job"
        title-text="资金账户"
        search-url="/api/admin/xdBillAccount/datas"
        :search-conditions="pageConditions"
        :edit-component="DemoEdit"
    >
        <template #conditions-form>
            <jb-input
                v-model:value="pageConditions.keywords"
                placeholder="输入关键字搜索"
                @keyup.enter="postPage?.loadData(true)"
            />
            <jb-select
                v-model:value="pageConditions.sex"
                url="/api/admin/dictionary/options?typeKey=sex"
                placeholder="=性别="
                class="w-130px"
            ></jb-select>
            <jb-select
                v-model:value="pageConditions.enable"
                url="/api/admin/dictionary/options?typeKey=options_enable"
                placeholder="=状态="
                filterable
                class="w-100px"
            ></jb-select>
            <jb-select
                v-model:value="pageConditions.type"
                url="/api/admin/dictionary/options?typeKey=dept_type"
                placeholder="=类型="
                :clearable="false"
                class="w-130px"
                filterable
            ></jb-select>
            <n-date-picker
                v-model:formatted-value="pageConditions.startTime"
                placeholder="=开始时间="
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                clearable
                class="w-190px"
            />
        </template>
        <template #opt>
            <n-button-group>
                <jb-btn
                    ghost
                    type="primary"
                    :icon="Icons.ADD"
                    @click="postPage?.showEditModal('新增Demo数据')"
                >
                    新增
                </jb-btn>
            </n-button-group>
        </template>
        <template #default="{ list, tableStartIndex }">
            <jb-super-table
                ref="tableRef"
                :start-index="tableStartIndex"
                :data="list"
                :row-config="{  }"
            >

                <jb-super-column
                    type="seq"
                    title="序号"
                    width="60"
                    fixed="left"
                ></jb-super-column>
                <jb-super-column
                    field="name"
                    title="账户名称"
                    min-width="140"
                    editable="input"
                    edit-submit-url="/api/admin/demoTable/updateColumn"
                >
                </jb-super-column>
                <jb-super-column
                    field="total_amount"
                    title="金额"
                    min-width="140"
                    align="left"
                    editable="date"
                    edit-submit-url="/api/admin/demoTable/updateColumn">

                </jb-super-column>
                <jb-super-column
                    field="alias"
                    title="别名"
                    min-width="140"
                    editable="select"
                    edit-submit-url="/api/admin/demoTable/updateColumn">
                </jb-super-column>
                <jb-super-column title="操作" width="110" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            :icon="Icons.EDIT"
                            type="warning"
                            secondary
                            circle
                            @click="
                                postPage?.showEditModal('编辑Demo数据', {
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            :icon="Icons.DELETE"
                            secondary
                            type="error"
                            class="mx-8px"
                            circle
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/demoTable/delete/${row.id}`"
                            @success="postPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-super-column>
            </jb-super-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import JbTagGroup from '@/components/_builtin/jb-tag-group/index.vue'
import DemoEdit from './components/edit/index.vue'

const postPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    sex: '',
    type: '',
    enable: '',
    startTime: null
})
</script>

<style scoped></style>
